/*
 * @Author: nainaiyi s15037075861@163.com
 * @Date: 2022-10-21 19:55:28
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-10-27 20:45:29
 * @FilePath: \audit-app\src\pages\homer\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from 'react'
import "./index.css"
import { Search, Button } from 'react-vant';

const House= () => {
  const [value, setValue] = useState('');
  return (
    <div className='house'>
      <div className='house-header'>
        <div className='house-title'>
          找房
        </div>
        <div className="house-header-box">
          <div className='house-header-box-top'>
            帮我找房
          </div>
          <div className='house-header-box-main'>
            <div className='house-header-box-search'>
              <Search value={value} onChange={setValue} placeholder="城市、区域、意向楼盘" />
            </div>
            <div className='house-header-box-searchT'>
              <Search value={value} clearIcon onChange={setValue} placeholder="请输入姓名" /><span className='span'> </span>
              <Search value={value} clearIcon onChange={setValue} placeholder="请输入手机号" />
            </div>
            <div className='house-demo-button'>
              <Button  block  className='btn'>
                发布需求
              </Button>
            </div>
            <div className='house-demo-bottom'>
              城市区域、意向楼盘城市区域意
            </div>
          </div>

        </div>

      </div>
      <div className='house-content'>
        <div className="house-one">
          <p>
            <span>新房</span> <br/>
            <span style={{ color:'#f772f7'}}>热门新楼盘</span>
          </p>
          <img src={require('../../img/house1.png')} alt="" style={{width:'35px',marginLeft:'20px'}}/>
        </div>
        <div className="house-one">
          <p>
            <span>新房</span> <br />
            <span style={{ color: '#A2DDEC' }}>热门新楼盘</span>
          </p>
          <img src={require('../../img/house2.png')} alt="" style={{width:'35px',marginLeft:'20px'}}/>
        </div>
        <div className="house-one">
          <p>
            <span>新房</span> <br />
            <span style={{ color: '#6EDBC4' }}>热门新楼盘</span>
          </p>
          <img src={require('../../img/house3.png')} alt="" style={{width:'35px',marginLeft:'20px'}}/>
        </div>
        <div className="house-one">
          <p>
            <span>新房</span> <br />
            <span style={{ color: '#F6DF81' }}>热门新楼盘</span>
          </p>
          <img src={require('../../img/house4.png')} alt="" style={{width:'35px',marginLeft:'20px'}}/>
        </div>
      </div>
    </div>
  )
}

export default House;
